<template>
  <div class="publish">
    <van-nav-bar title="发布" />
    <!-- {{$store.state.a}} -->
    <div class="classify">
      <van-field
        readonly
        clickable
        label="分类"
        :value="cate_name"
        placeholder="选择分类"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
    <van-cell-group>
      <van-field v-model="title" placeholder="请输入标题" class="title" />
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="content" placeholder="请输入内容" class="nr" />
    </van-cell-group>
    <!-- <span>
     <svg class="tt" aria-hidden="true">
        <use xlink:href="#icon-xiangji"></use>
      </svg>
    </span> -->
      <div class="about">
        <!-- <input type="file" @change="upload" /> -->
        <van-uploader
          v-model="fileList"
          :after-read="afterRead"
          :max-count="3"
        />
      </div>
    <div style="margin: 16px">
      <van-button
        @click="getissue"
        round
        block
        type="info"
        native-type="submit"
        class="btn"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script>
// 弹出层
import { Picker } from "vant";
import { Popup } from "vant";
import { Uploader } from "vant";
import { Field } from "vant";
export default {
  name: "WorkspaceJsonAbout",
  components: {
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Uploader.name]: Uploader,
  },
  data() {
    return {
      value: "",
      cate_name: "",
      cate_id: "",
      title: "",
      content: "",
      nav: [],
      imageSrc: [],
      fileList: [],
      showPicker: false,
      columns: [],
    };
  },

  mounted() {},
  created() {
    this.getnav();
  },

  methods: {
    onConfirm(value, index) {
      this.cate_name = this.nav[index].name;
      console.log(this.cate_name);

      this.cate_id = this.nav[index]._id;
      console.log(this.cate_id);

      this.cate_name = value;
      this.showPicker = false;
    },
    // 获取分类
    getnav() {
      this.$http.post("/api/get_cate_list").then((res) => {
        this.nav = res.data;
        console.log(this.nav);
        this.nav.forEach((v) => {
          console.log(v.name);
          this.columns.push(v.name);
        });
      });
    },

    async afterRead(file1) {
     console.log(file1);
            let file=file1.file
            let { type } = file1.file;
            type = type.split('/')[1];  
			// 重新命名
            console.log(type);
			let file_name = `${new Date().getTime()}_${Math.random()
				.toString(36)
				.slice(2)}.${type}`;
				

      // 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息

      let { token } = await this.$http.post("/upload/token");

      // new一个form data   并且把文件 token  和文件的名字放进去  file token key是固定的 不能改
      const formdata = new FormData();
      formdata.append("file", file);
      formdata.append("token", token);
      formdata.append("key", file_name);

      // https://upload-z1.qiniup.com 是上传到七牛的真正接口  其中z1是华北区域

      let result = await this.$http.post(
        "https://upload-z1.qiniup.com",
        formdata
      );
      console.log(result);
      console.log(`http://toutiao.longxiaokj.com/` + result.key);
      this.imageSrc.push(`http://toutiao.longxiaokj.com/` + result.key);
      console.log(this.imageSrc);
      // `http://toutiao.longxiaokj.com/` + result.key  这个地址就是传到服务器的地址
      // 发布文章时 imageSrc  字段需要的就是这个
    },

    // 发布
    getissue() {
      let author = JSON.parse(localStorage.getItem("userInfo")).nickname;
      let author_id = localStorage.getItem("uid");
      console.log(author_id);
      let { cate_name, cate_id, title, content, imageSrc, fileList } = this;
      console.log(imageSrc);
      console.log(fileList);
      // console.log(this.cate_name,this.cate_id);
      this.$http
        .post("/api/add_article", {
          title,
          content,
          cate_name,
          cate_id,
          author,
          author_id,
          imageSrc,
        })
        .then((res) => {
          console.log(res);
          if (res.code === 0) {
            this.$toast.success("已完成发布当前内容");
            (this.title = ""),
              (this.cate_name = ""),
              (this.content = ""),
              (this.imageSrc = []);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.publish {
  height: 600px;
  background: rgb(245, 247, 249);
}
.title {
  margin: 10px 0;
  background: rgb(255, 255, 255);
}
.nr {
  height: 100px;
}
.classify {
  margin-top: 10px;
}
.btn {
  background: #2196f3;
  border: none;
  border-radius: 0;
  width: 300px;
  margin-left: 27px;
  margin-top: 10px;
}
.tt {
  display: block;
  width: 25px;
  margin-left: 19px;
  height: 80px;
}
.about {
  margin: 15px;
}
</style>